@import org.silkframework.util.DPair
@import org.silkframework.entity.Link
@import plugins.Context
@import models.linking.LinkCandidateDecision
@import controllers.linking.routes
@import models.learning.PathValue
@import models.learning.PathValues
@import org.silkframework.rule.LinkSpec

@(link: Link, sourceValues: Seq[PathValues], targetValues: Seq[PathValues],context: Context[LinkSpec])

<div id="link-candidate-buttons" class="button-set" style="text-align: center; margin-bottom: 20px;">
  <button id="confirmButton" class="mdl-button mdl-js-button mdl-button--raised" onclick="confirm()" title="Confirm this link candidate as correct." >Confirm</button>
  <button id="declineButton" class="mdl-button mdl-js-button mdl-button--raised" onclick="decline()" title="Confirm this link candidate as incorrect." >Decline</button>
  <button id="notSureButton" class="mdl-button mdl-js-button mdl-button--raised" onclick="pass()" title="Show the next link." >Not Sure</button>
  <button id="doneButton" class="mdl-button mdl-js-button mdl-button--raised" onclick="done()" title="Show generated linkage rules." >Done</button>
</div>

<div class="mdl-grid" style="clear: left">
  @table(sourceValues)
  @table(targetValues)
</div>

@table(selectedValues: Seq[PathValues]) = {
  <div class="mdl-cell mdl-cell--6-col">
    <table style="width: 100%;">
      <thead>
        <tr>
          <th>Path</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        @for(PathValues(path, pathValues) <- selectedValues) {
          <tr>
            <td><span class="learning_path_label">@path</span></td>
            <td>
              @for(PathValue(value, similarityClass) <- pathValues) {
                <span class="learning-value@similarityClass.getOrElse(0)" >@value</span>
              }
            </td>
          </tr>
        }
      </tbody>
    </table>
  </div>
}

<script type="text/javascript">

  function confirm() {
    nextLinkCandidate('@routes.Learning.activeLearnCandidate(context.project.name, context.task.id).url', '@LinkCandidateDecision.positive');
  }

  function decline() {
    nextLinkCandidate('@routes.Learning.activeLearnCandidate(context.project.name, context.task.id).url', '@LinkCandidateDecision.negative');
  }

  function pass() {
    nextLinkCandidate('@routes.Learning.activeLearnCandidate(context.project.name, context.task.id).url', '@LinkCandidateDecision.pass');
  }

  function done() {
    window.location = "@routes.Learning.population(context.project.name, context.task.id).url"
  }

  function nextLinkCandidate(url, decision) {
    var buttons = $("#link-candidate-buttons").find("button");
    buttons.prop("disabled", true);

    $.post(
      url,
      {
        source: "@link.source",
        target: "@link.target",
        decision: decision
      },
      function(data) {
        $('#link-candidate-wrapper').html(data);
        buttons.prop("disabled", false);
      })
      .fail(function(request) { alert(request.responseText); })
  }

</script>
